<template>
  <view class="container">
    <!-- 优化后的滚动区域 -->
    <scroll-view
        class="scroll-view"
        :style="{ height: scrollViewHeight + 'px' }"
        scroll-y
        @scrolltolower="loadMore"
        :scroll-with-animation="true"
    >
      <!-- 骨架屏加载 -->
      <template v-if="loading && page === 1">
        <view class="skeleton-item" v-for="i in 3" :key="i">
          <view class="skeleton-checkbox"></view>
          <view class="skeleton-content">
            <view class="skeleton-title"></view>
            <view class="skeleton-price"></view>
          </view>
        </view>
      </template>

      <!-- 套餐项优化样式 -->
      <view
          v-for="item in packageList"
          :key="item.id"
          class="package-item"
          :class="{ 'active-item': selectedPackages.includes(item.id) }"
          @click="toggleSelect(item.id)"
      >
        <view class="checkbox-wrapper">
          <view class="checkbox" :class="{ checked: selectedPackages.includes(item.id) }">
            <uni-icons
                v-if="selectedPackages.includes(item.id)"
                type="checkmarkempty"
                size="14"
                color="#fff"
            />
          </view>
        </view>
        <view class="content">
          <view class="title-area" @click.stop="showDetail(item)">
            <text class="title">{{ item.name }}</text>
            <uni-icons type="right" size="14" color="#999" >查看详情</uni-icons>
          </view>
          <view class="price-area">
            <view class="price-tag">
              <text class="discount">立减{{ item.originalPrice - item.price }}元</text>
              <text class="final-price">¥{{ item.price }}</text>
            </view>
            <text class="original-price">¥{{ item.originalPrice }}</text>
          </view>
        </view>
      </view>

      <!-- 优化加载状态 -->
      <view class="load-status">
        <view v-if="loading" class="loading-box">
          <image src="/static/loading.gif" class="loading-icon" />
          <text>正在加载...</text>
        </view>
        <text v-if="noMore" class="no-more">—— 已经到底啦 ——</text>
      </view>
    </scroll-view>

    <!-- 美化底部操作栏 -->
    <view class="footer-bar">
      <view class="selected-info">
        <text class="count">已选{{ selectedPackages.length }}项</text>
        <text class="discount-total">共优惠：¥{{ totalDiscount }}</text>
      </view>
      <button
          class="submit-btn"
          :class="{ active: selectedPackages.length > 0 }"
          @click="handleSubmit"
      >
        立即结算
      </button>
    </view>

    <!-- 优化详情弹窗 -->
    <uni-popup ref="detailPopup" type="center" :mask-click="false">
      <view class="detail-modal">
        <view class="modal-header">
          <text class="modal-title">套餐详情</text>
          <uni-icons
              type="close"
              size="20"
              color="#999"
              @click="detailPopup.close()"
          />
        </view>
        <scroll-view scroll-y class="modal-content">
          <text class="detail-name">{{ currentDetail?.name }}</text>
          <view class="price-row">
            <text class="label">套餐价格：</text>
            <text class="value red-text">¥{{ currentDetail?.price }}</text>
          </view>
          <view class="price-row">
            <text class="label">原价：</text>
            <text class="value del-text">¥{{ currentDetail?.originalPrice }}</text>
          </view>
          <view class="divider"></view>
          <text class="desc">{{ currentDetail?.description }}</text>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import {getlist} from '@/api/mcslf/PackageController.js'

// 套餐列表数据
const packageList = ref([
	{
		name:"御姐套餐",
    id:1,
	  price:999,
	  originalPrice:1000,
	}
]);
const page = ref(1);
const pageSize = ref(10);
const total = ref();
const loading = ref(false);
const noMore = ref(false);
// 选中的套餐
const selectedPackages = ref([])

// 当前查看的详情
const currentDetail = ref(null);
const detailPopup = ref(null);

// 计算总优惠
const totalDiscount = computed(() => {
  return packageList.value.reduce((sum, item) => {
    return selectedPackages.value.includes(item.id)
        ? sum + (item.originalPrice - item.price)
        : sum;
  }, 0);
});

// 计算scroll-view高度
const scrollViewHeight = computed(() => {
  const systemInfo = uni.getSystemInfoSync();
  return systemInfo.windowHeight - 50; // 减去底部栏高度
});

// 初始化加载
const loadData = async () => {
let query = {
  size:pageSize.value,
  current:page.value
}
 return  await getlist(query)
};

// 加载更多
const loadMore = async () => {
  let res = await loadData();
  if(res.code == 200){
    console.log(res.data.records)
    // 		name:"御姐套餐",
    // id:1,
    //     price:999,
    //     originalPrice:1000,
    let data = res.data.records;
    data.forEach(item=>{
      item.name = item.packageName;
      item.id = item.packageId;
      item.price = item.prince;
      item.originalPrice = parseInt(item.prince) + parseInt(item.discountAmount);

    })
    packageList.value = [...packageList.value,...res.data.records]
    page.value = page.value +1;
  }
};

// 切换选中
const toggleSelect = (id) => {
  const index = selectedPackages.value.indexOf(id);
  if (index > -1) {
    selectedPackages.value.splice(index, 1);
  } else {
    selectedPackages.value.push(id);
  }
};

// 查看详情
const showDetail = (item) => {
  currentDetail.value = item;
  detailPopup.value.open();
};

// 提交
const handleSubmit = () => {
  console.log(selectedPackages.value);
  uni.showToast({
    title: `已选择${selectedPackages.value.length}个套餐`,
    icon: 'none'
  });
};

onMounted(() => {
  loadMore();
});
</script>

<style lang="scss">
/* 新增美化样式 */
.container {
  background: #f8f8f8;
}

.package-item {
  margin: 10px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  display: flex;
  transition: all 0.2s;

  &.active-item {
    box-shadow: 0 2px 12px rgba(7, 193, 96, 0.15);
    border: 1px solid #07c160;
  }
}

.checkbox-wrapper {
  padding-right: 12px;
  display: flex;
  align-items: center;

  .checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &.checked {
      background: #07c160;
      border-color: #07c160;
    }
  }
}

.title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;

  .title {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
}

.price-area {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .price-tag {
    display: flex;
    align-items: baseline;

    .discount {
      background: #fef2f2;
      color: #eb5757;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-right: 8px;
    }

    .final-price {
      color: #07c160;
      font-size: 20px;
      font-weight: bold;
    }
  }

  .original-price {
    color: #999;
    font-size: 13px;
    text-decoration: line-through;
  }
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);

  .selected-info {
    display: flex;
    flex-direction: column;

    .count {
      color: #666;
      font-size: 14px;
    }

    .discount-total {
      color: #eb5757;
      font-size: 12px;
      margin-top: 2px;
    }
  }

  .submit-btn {
    background: #f0f0f0;
    color: #999;
    border-radius: 20px;
    font-size: 15px;
    transition: all 0.2s;

    &.active {
      background: #07c160;
      color: #fff;
    }
  }
}

.detail-modal {
  background: #fff;
  border-radius: 16px;
  width: 85vw;

  .modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;

    .modal-title {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .modal-content {
    max-height: 60vh;
    padding: 20px;

    .detail-name {
      font-size: 16px;
      color: #333;
      margin-bottom: 15px;
      display: block;
    }

    .price-row {
      margin: 10px 0;
      display: flex;
      align-items: center;

      .label {
        color: #666;
        width: 80px;
      }

      .red-text {
        color: #eb5757;
      }

      .del-text {
        text-decoration: line-through;
      }
    }

    .divider {
      height: 1px;
      background: #eee;
      margin: 15px 0;
    }

    .desc {
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }
  }
}

/* 骨架屏样式 */
.skeleton-item {
  margin: 10px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  display: flex;

  & > view {
    background: linear-gradient(90deg, #f8f8f8 25%, #fff 50%, #f8f8f8 75%);
    background-size: 400% 400%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
  }

  .skeleton-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 12px;
  }

  .skeleton-content {
    flex: 1;

    .skeleton-title {
      width: 60%;
      height: 18px;
      margin-bottom: 10px;
    }

    .skeleton-price {
      width: 40%;
      height: 16px;
    }
  }
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50% }
  100% { background-position: 0 50% }
}

/* 加载状态 */
.load-status {
  color: #999;
  padding: 20px 0;
  text-align: center;

  .loading-box {
    display: flex;
    align-items: center;
    justify-content: center;

    .loading-icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }

  .no-more {
    color: #ccc;
    font-size: 12px;
  }
}
</style>
